<template>
  <view class="page">
    <header-vue :back="true" :title="title"></header-vue>
    <view class="page-content">
      <!-- 顶部统计信息 -->
      <view class="stats-section">
        <view class="stats-card">
          <view class="stats-header">
            <text class="stats-title">已推广</text>
          </view>
          <text class="stats-count">12</text>
        </view>
      </view>
      <view class="sort-btn" @click="handleSort">
        <text class="sort-text">排序</text>
        <u-icon name="arrow-down" size="12" color="#666"></u-icon>
      </view>
      <!-- 推广列表 -->
      <view class="promotion-list">
        <view
          v-for="(item, index) in promotionList"
          :key="index"
          class="promotion-item"
        >
          <view class="item-header">
            <view class="user-info">
              <u-image
                :src="item.avatar"
                class="user-avatar"
                width="80rpx"
                height="80rpx"
                shape="circle"
                mode="aspectFill"
              ></u-image>
              <view class="user-details">
                <text class="username">{{ item.username }}</text>
                <text class="promotion-time">{{ item.time }}</text>
              </view>
            </view>
          </view>

          <view class="promotion-stats">
            <view class="stat-item">
              <text class="stat-value">{{ item.amount }}</text>
              <text class="stat-label">推广金额（元）</text>
            </view>
            <view class="stat-item">
              <text class="stat-value">{{ item.orderCount }}</text>
              <text class="stat-label">推广订单数</text>
            </view>
            <view class="stat-item">
              <text class="stat-value">{{ item.peopleCount }}</text>
              <text class="stat-label">推广人数</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-if="promotionList.length === 0" class="empty-state">
        <u-icon name="list" color="#ccc" size="60"></u-icon>
        <text class="empty-text">暂无推广记录</text>
      </view>
    </view>
  </view>
</template>

<script>
import headerVue from "@/components/header.vue";

export default {
  data() {
    return {
      title: "推广拉新",
      promotionList: [
        {
          avatar: "/static/images/avatar1.png",
          username: "南方小土豆",
          time: "2025-04-06 15:45:30",
          amount: "999.00",
          orderCount: "200",
          peopleCount: "10",
        },
        {
          avatar: "/static/images/avatar2.png",
          username: "南方小土豆",
          time: "2025-04-06 15:45:30",
          amount: "999.00",
          orderCount: "200",
          peopleCount: "10",
        },
        {
          avatar: "/static/images/avatar3.png",
          username: "南方小土豆",
          time: "2025-04-06 15:45:30",
          amount: "999.00",
          orderCount: "200",
          peopleCount: "10",
        },
      ],
    };
  },
  components: {
    headerVue,
  },
  methods: {
    // 处理排序
    handleSort() {
      uni.showActionSheet({
        itemList: ["按推广金额排序", "按订单数排序", "按推广人数排序"],
        success: (res) => {
          const sortTypes = ["amount", "orderCount", "peopleCount"];
          this.sortList(sortTypes[res.tapIndex]);
        },
      });
    },

    // 排序列表
    sortList(sortType) {
      this.promotionList.sort((a, b) => {
        return parseFloat(b[sortType]) - parseFloat(a[sortType]);
      });
      uni.showToast({
        title: "排序成功",
        icon: "success",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: #f6f6f6;

  .page-content {
    flex: 1;
    box-sizing: border-box;
    width: 100%;
    overflow-y: auto;
    padding: 28rpx 32rpx;
  }
}

.stats-section {
}

.stats-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28rpx;
}

.stats-title {
  font-size: 28rpx;
  color: #666;
  font-weight: 500;
}

.sort-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 136rpx;
  height: 52rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);
  border-radius: 60rpx 60rpx 60rpx 60rpx;
}

.sort-text {
  font-size: 24rpx;
  color: #333;
}

.stats-count {
  font-weight: bold;

  font-size: 68rpx;
  color: #333333;
}

.promotion-list {
  padding: 28rpx 0;
}

.promotion-item {
  background: #ffffff;

  padding: 28rpx;
  margin-bottom: 28rpx;
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
  border-radius: 20rpx 20rpx 20rpx 20rpx;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
  padding-bottom: 15rpx;
}

.user-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: #f0f0f0;
  margin-right: 20rpx;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.promotion-time {
  font-size: 24rpx;
  color: #999;
}

.promotion-stats {
  display: flex;
  justify-content: space-between;
  background: #f2faff;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  padding: 20rpx;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 10rpx;
  text-align: center;
}

.stat-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  color: #ccc;
}

.empty-text {
  font-size: 28rpx;
  margin-top: 20rpx;
  color: #999;
}
</style>
